import React from 'react';
import '@/pages/Drag/sub-components/propertyConfig/propertyConfig.less';

import {
  Input,Checkbox,Radio,Space,Button
} from 'antd';

import {
  PlusOutlined
} from '@ant-design/icons';

import {
  titleRender,isInline,
  fieldRender,checkRender,
  descRender,tipRender,
  fieldPermissionsRender,
  spanWidthRender
} from '@/components/ComponentConfig/commonItem';

import {uuid} from '@/utils/utils';

type PropsType ={
  config:any,
  onChangeCallback:Function
}

function RadioConfig(props:PropsType){
  const {config} = props;

  
  function radioRender(key:string){
    const onRadioInputChange = (e:any,rindex:number,type:string)=>{
      const resArr = [...config.props[key]];
      resArr[rindex][type] = e.target.value;
      const data = {...config,props:{...config.props,[key]:resArr}}
      props.onChangeCallback(data)
    }
    const onRadioGroupChange = (e:any,key:string)=>{
      const data = {...config,[key]:e.target.value}
      props.onChangeCallback(data)
    }
    const onRadioClick = ()=>{
      const data = {...config,['value']:''}
      props.onChangeCallback(data)
    }
    const addLine = ()=>{
      const data = {...config}
      const inx = (data.props.options.length + 1);
      data.props.options.push({
        label:'选项' + inx,
        value: '值'+ inx,
        id:uuid()
      })
      props.onChangeCallback(data)
    }
    const delItem =(r:any)=>{
      const data = {...config}
      data.props.options = data.props.options.filter((v:any)=>v.value !== r.value);
      props.onChangeCallback(data)
    }
    return (
      <div className="item" key={key}>
        <h4 className="tit">选项：</h4>
        
        <Radio.Group 
          onChange={(e)=>{onRadioGroupChange(e,'value')}} 
          value={config['value']}
          className="radioGroup"
        >
          <Space direction={"vertical"}>
            {config.props[key].map((r:any,rindex:number)=>(
              <Radio key={r.id} value={r.value} onClick={onRadioClick}>
                <Input 
                  value={r.label} 
                  defaultValue={r.label} 
                  onChange={(e)=>onRadioInputChange(e,rindex,'label')}
                  className="input"
                />
                <Input 
                  value={r.value} 
                  defaultValue={r.value} 
                  onChange={(e)=>onRadioInputChange(e,rindex,'value')}
                  className="input"
                />
                <span className="del" onClick={()=>delItem(r)}>删除</span>
              </Radio>
            ))}
          </Space>
        </Radio.Group>

        <div className="editBot">
          <Button size="small" icon={<PlusOutlined />} onClick={addLine}>添加选项</Button>
        </div>
      </div>
    )
  }

  function verticalRender(key:string){
    function onInputChange(e:any,key:string){
      const data = {...config,props:{...config.props,[key]:e.target.value}}
      props.onChangeCallback(data);
    }
    return (
      <div className="item" key={key}>
         <h4 className="tit">排列方式：</h4>
        
        <Radio.Group 
          onChange={(e)=>{onInputChange(e,key)}} 
          defaultValue={config.props[key]} 
          buttonStyle="solid"
          value={config.props[key]}
          >
           <Radio.Button  value={true}>纵向排列</Radio.Button>
           <Radio.Button value={false}>横向排列</Radio.Button>
        </Radio.Group>
      </div>
    )
  }
  return (
    <div>     
      { titleRender(config,props,'title')}
      { fieldRender(config,props,'field')}
      { descRender(config,props,'describe')}

      {radioRender('options')}
      {verticalRender('vertical')}

      { fieldPermissionsRender(config,props,'fieldPermissions')}
      { checkRender(config,props,'check')}
      { isInline(config,props,'inline')}
      { spanWidthRender(config,props,'span')}
    </div>
  )
}
export default RadioConfig